<template>
	<view class="content">
		<!-- 免责声明弹窗 -->
		<u-modal :show="mzObj.mzShow" 
		:title="mzObj.mzTitle"
		:showCancelButton="true"
		confirmColor="#e40d1c"
		cancelColor="#e40d1c"
		confirmText="同意"
		cancelText="不同意"
		:buttonReverse="true"
		@confirm="mzConfirm()"
		@cancel="mzCancel()"
		>
			<view class="slot-content">
				<rich-text 
				style="letter-spacing: 1px; text-indent: 2em; line-height: 24px;" 
				:nodes="mzObj.mzContent">
				</rich-text>
			</view>
		</u-modal>
		
		<!-- 请同意弹窗 -->
		<u-modal :show="cancelShow"
			confirmText="确定"
			confirmColor="#e40d1c"
			@confirm="mzCancelConfirm()">
			<view class="slot-content">
				<rich-text style="color: #737373;" :nodes="cancelContext"></rich-text>
			</view>
		</u-modal>
		
		<!-- 地图 -->
		<map
			style="width: 100%; z-index: 0 !important;" 
			:style="'height:' + (heightWindows) + 'px'"
			id="mapContext"
			:latitude="latitude"
			:longitude="longitude" 
			:show-location="true"
			:enable-satellite="curNow == 1"
			:markers="markers"
			:polyline="polyline"
			:scale="mapScale"
			:show-compass="false"
			:enable-traffic="true"
			:enable-rotate="true"
			@markertap="openAedDetial"
			@tap="clickMap"
		>

		</map>
		
		<!-- 免责声明 --> 

		<view class="main_page" @click="openMzModel">
			<view class="mz_btn">
				<view class="mz_btn_box">
					免责声明
				</view>
			</view>
		</view>
		
		<!-- 切换卫星 -->
		<view class="qh_map_type">
			<view class="qh_map_box">
				<u-subsection 
					:list="subsectionList" 
					:current="curNow"
					 activeColor="#e40d1c"
					@change="sectionChange"
					>
				</u-subsection>
			</view>
		</view>
		
		<!-- 切换地图大小 -->

		<view class="map_scale">
			<view class="map_scale_add" @click="changeMapSize(1)">
				<u-icon name="plus" color="#686868" bold size="26"></u-icon>
			</view>
			<view class="map_scale_minus" @click="changeMapSize(-1)">
				<u-icon name="minus" color="#686868" bold size="26"></u-icon>
			</view>
		</view>
		
		
		<!-- 列表以及搜索按钮 -->
		<view class="yw_btn_box">
			<view @click="changePopup()">
				<!-- {{ popupShow == false ? "展开":"关闭" }}列表 -->
				展开列表
			</view>
			<!-- <view style="margin-left: 10px;">
				搜索AED
			</view> -->
		</view>
		
		
		<view class="ade_info_box" v-if="infoStatus">
			<!-- 头 -->
			<view class="closeIconBox">
				<view class="closeIconBox_left">
					<!-- <view style="font-weight: bold; font-size: 16px;" 
					:style="{color: selAedInfo.status == 0 ? '#19be6b':'#fa3534'}">
						{{selAedInfo.status == 0 ? '#正常':'未开放'}}
					</view> -->
				</view>
				
				<view @click="infoStatus = false"  style="z-index: 999;">
					<u-icon 
					name="close" 
					color="#fff" 
					size="16"></u-icon>
				</view>
			</view>
			
			<view class="main_info" style="position: relative; bottom: 12px;">
				<view class="main_info_left">
					<view class="main_info_btn_box">
						<view>
							<u-button
								@click="toFeed()"
								size="mini"
								color="#4c545e"
								type="primary" 
								icon="file-text" 
								text="反馈">
							</u-button>
						</view>
						<view style="margin-left: 15px;">
							<u-button
								@click="shareWeixin()"
							    open-type="share"
								size="mini"
								color="#4c545e"
								type="primary" 
								icon="share-square" 
								text="分享">
							</u-button>
						</view>
					</view>
					
					<view class="ade_name">
						<u-icon 
							name="home" 
							color="#fff" 
							size="16">
						</u-icon>
						
						<view style="width: 3px;"></view>
						
						<u-text color="#fff" 
							size="12" 
							:lines="2" 
							:text="selAedInfo.aedName">
						</u-text>
						
					</view>
					
					<view class="ade_address">
						<u-icon
							name="map" 
							color="#fff" 
							size="16">
						</u-icon>
						
						<view style="width: 3px;"></view>
						
						<u-text color="#fff"
							size="12" 
							:lines="2" 
							:text="selAedInfo.address">
						</u-text>
					</view>
					
					<view class="ade_name">
						<u-icon 
							name="phone" 
							color="#fff" 
							size="16">
						</u-icon>
						<view style="width: 3px;"></view>
						<view style="width: 110px;">
							<u-text color="#fff"
								style="position: relative; top: 1px;"
								size="12" 
								:lines="2" 
								:text="selAedInfo.phoneNum">
							</u-text>
						</view>
						
						<view style="position: relative; bottom: 1px;">
							<u-button
								@click="callKefu(selAedInfo.aedName)"
								size="mini"
								color="#4c545e"
								type="primary" 
								icon="kefu-ermai" 
								text="拨打">
							</u-button>
						</view>
					</view>
					
				</view>
				
				<view style="width: 40px;">
					<view @click="toSanMap()">
						<image 
						src="/static/dhIcon.png" 
						style="width: 40px; height: 40px;"
						mode=""></image>
					</view>
					<!-- <view style="margin-top: 10px;">
						详情>
					</view> -->
				</view>
			</view>
		</view>
		

		<u-popup :show="popupShow" 
		:closeOnClickOverlay="true"
		@open="popupOpen"
		@close="popupClose"
		>
			<view style="padding: 10px 15px;">
				<view style="text-align: center; font-weight: bold;">
					数字地图列表
				</view>
				<view style="height: 10px;"></view>
				<view>
					<u-search 
					v-model="searchKey"
					placeholder="请输入名称或手机号"
					@search="searchAde"
					@custom="searchAde"
					:showAction="true" 
					actionText="搜索" 
					:animation="false"></u-search>
				</view>
				<view style="height: 12px;"></view>
				<view style="height: 400px; overflow-y: auto;">
					<view
					v-for="(item, index) in adeNoPhoneList" :key="index"
					style="
					display: flex; align-items: center; 
					padding: 5px 7px; border-bottom: 1px solid #d6d6d6;
					">
						<view style="flex: 1;">
							<view>
								<u-text :lines="1" :text="item.aedName"></u-text>
							</view>
							<view style="color: #737373; font-size: 15px;">{{item.address}}</view>
						</view>
						<!-- <view style="width: 90px; text-align: center; font-size: 14px;
						font-weight: bold;"
						:style="{color: item.status == 0 ? '#19be6b':'#fa3534'}"
						>
							{{ item.status == 0 ? "正常" : "待审核" }}
						</view> -->
						<view style="width: 40px; margin-left: 12px;">
							<image 
							@click="toMyMap(item)"
							style="width: 24px; height: 24px;"
							src="/static/dhIcon.png" 
							mode=""></image>
						</view>
					</view>
				</view>
				
			</view>
		</u-popup>
		
		<u-modal :show="applyShow" 
			title="自助上传"
			:showCancelButton="true"
			confirmText="提交审核"
			cancelText="取消"
			@confirm="submitForm"
			 @cancel="applyShow = false"
			 @close="applyShow = false"
		>
			<view class="slot-content" style="width: 100%;">
				<u-form 
					labelPosition="top"
					labelWidth="80"
					:model="form"
					:rules="rules"
					ref="uForm"
				>
					<u-form-item
						label="联系方式"
						prop="mobile"
					>
						<u--input
							v-model="form.mobile"
							border="bottom"
							placeholder="请输入联系方式"
						></u--input>
					</u-form-item>
					
					<u-form-item
						label="详细地址"
						prop="mobile"
					>
						<u--input
							v-model="form.address"
							border="bottom"
							placeholder="请输入详细地址"
						></u--input>
					</u-form-item>
					
					<u-form-item
						label="已选地址"
						prop="mapPoint"
					>
						<u--input
							v-model="form.mapPoint"
							border="bottom"
							:disabled="true"
							disabledColor="#FFF"
							placeholder=""
						></u--input>
					</u-form-item>
				
				</u-form>
			</view>
			
		</u-modal>
		
		
		<u-toast ref="uToast"></u-toast>
		<tabbarCom :current="1"></tabbarCom>
	</view>
</template>

<script>
	import tabbarCom from "../../components/tabbar/tabbar.vue"
	import { aedList, getAedInfoById, aedNoPhoneList, aedSubCustomer } from "../../config/api.js"
	export default {
		components: {
			tabbarCom
		},
		data() {
			return {
				mzObj: {
					mzShow: false,
					mzTitle: "免责声明",
					mzContent: `
					<p>在使用本应用前，请您务必仔细阅读并透彻理解本声明。若您使用本应用，您的使用行为将被视为对本声明全部内容的认可。</p>
					<p>本应用所提供的应急抢险，医疗救援所在网点名称.地址信息，仅供查询参考，实际导航结果以用户所选用的第三方地图应用所显示的位置为准，本应用不保证其导航定位的准确性。</p>
					<p>第三方提供的应急抢险，医疗救援数据仅供用户参考，我们会对应急抢险，医疗救援数据进行定期更新，但不保证该应急抢险，医疗救援数据的绝对安全、准确、有效，也不保证不会出现其他不确定的风险。由此引发的任何争议及损害与本应用无关，本应用不承担任何责任。</p>
					<p>在法律允许的范围内，本应用不承担任何就使用或未能使用本应用所提供的信息所致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。</p>
					`,
				},
				cancelShow: false,
				cancelContext: "<p style='text-align: center; font-weight: bold;'>请同意免责声明</p>",
				
				widthWindows: 0,
				heightWindows: 0,
				latitude: "",
				longitude: "",
				markers:[],
				polyline: [],
				mapScale: 15,
				subsectionList: [
					'地图', '卫星'
				],
				curNow: 0,
				popupShow: false,
				
				adeList: [],
				adeNoPhoneList: [],
				searchKey: "",
				
				infoStatus: false,
				selAedInfo: {},
				
				applyShow: false,
				form: {
					mobile: null,
					address: null,
					mapPoint: null
				},
				rules:{
					mobile: [
						{
							required: true, 
							message: '请输入联系方式',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '联系方式不正确',
							trigger: ['change','blur'],
						},
					],
					address: [
						{
							required: true, 
							message: '请输入详细地址',
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		onShow() {
			const that = this;
			const windowInfo = uni.getWindowInfo();
			that.widthWindows = windowInfo.windowWidth;
			// #ifndef MP-WEIXIN
				that.heightWindows = windowInfo.windowHeight;
			// #endif
			
			// #ifdef MP-WEIXIN
				that.heightWindows = windowInfo.windowHeight-45;
			// #endif
			
			that.getNowLocation();
			that.getNoPhoneList();
		}, 
		onReady() {
			//  #ifdef MP-WEIXIN
				this.$refs.uForm.setRules(this.rules)
			// #endif
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '数字地图',
				path: '/pages/index/index'
			}
		},
		methods: {
			submitForm(){
				const that = this;
				that.$refs.uForm.validate().then(res => {
					const [latitude, longitude] = that.form.mapPoint.split(",").map(Number);
					aedSubCustomer({
						"aedName": that.form.mobile,
						"address": that.form.address,
						"longitude": longitude,
						"latitude": latitude
					}).then(res => {
						that.$refs.uToast.show({
							message: "已提交审核！",
							duration: 800,
						});
						that.applyShow = false;
					})
				}).catch(errors => {
					console.log(errors);
				})
			},
			clickMap(e){
				const that = this;
				if(e.detail.markerId){
					return
				}
				that.form.mapPoint = `${e.detail.latitude.toFixed(6)},${e.detail.longitude.toFixed(6)}`;
				that.applyShow = true;
			},
			getNoPhoneList(){
				const that = this;
				aedNoPhoneList().then(res => {
					that.adeNoPhoneList = res.data;
				})
			},
			callKefu(phoneNum) {
				const that = this;
				if(!phoneNum){
					return
				}
				uni.makePhoneCall({
					phoneNumber: phoneNum
				});
			},
			getAdeList(){
				const that = this;
				aedList({
					"aedName": that.searchKey,
					"longitude": that.longitude,
					"latitude": that.latitude
				}).then(res => {
					if(that.searchKey != ""){
						that.adeNoPhoneList = res.data;
					}
					that.adeList = res.data;
					that.markers = [];
					for (var i = 0; i < res.data.length; i++) {
						const item = res.data[i];
						const marker = {
							id: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							title: item.aedName,
							iconPath: "/static/AED.png",
							width: 50,
							height: 50
						};
						that.markers.push(marker);
					}
				})
			},
			mzConfirm(){
				const that = this;
				that.mzObj.mzShow = false;
			},
			mzCancel(){
				const that = this;
				that.cancelShow = true;
				that.mzObj.mzShow = false;
			},
			mzCancelConfirm(){
				const that = this;
				that.mzObj.mzShow = true;
				that.cancelShow = false;
			},
			
			openMzModel(){
				const that = this;
				that.mzObj.mzShow = true;
			},
			
			getNowLocation(){
				const that = this;
				that.longitude = 115.770998;
				that.latitude = 28.160601;
				
				that.getAdeList();
				
			},
			sectionChange(index) {
				const that = this;
				that.curNow = index;
			},
			changeMapSize(num){
				const that = this;
				that.mapScale += num;
			},
			popupOpen(){
				
			},
			popupClose(){
				const that = this;
				that.popupShow = false;
			},
			changePopup(){
				const that = this;
				that.popupShow = true;
			},
			searchAde(val){
				const that = this;
				that.getAdeList();
			},
			openAedDetial(e){
				const that = this;
				getAedInfoById({
					id: e.detail.markerId
				}).then(res => {
					that.infoStatus = true;
					that.selAedInfo = res.data;
				})
			},
			toSanMap(){
				const that = this;
				uni.openLocation({
					latitude: Number(that.selAedInfo.latitude),
					longitude: Number(that.selAedInfo.longitude),
					name: that.selAedInfo.aedName,
					address: that.selAedInfo.address,
					success: function () {
						console.log('success');
					},
					fail: function(err) {
						console.log(err);
					}
				})
			},
			toMyMap(e){
				const that = this;
				uni.openLocation({
					latitude: Number(e.latitude),
					longitude: Number(e.longitude),
					name: e.aedName,
					address: e.address,
					success: function () {
						console.log('success');
					},
					fail: function(err) {
						console.log(err);
					}
				})
			},
			toFeed(){
				const that = this;
				const info = uni.getStorageSync("userInfo");
				if(info){
					uni.navigateTo({
						url:`/pages/feedback/feedback?info=${JSON.stringify(that.selAedInfo)}`
					})
				}else{
					that.$refs.uToast.show({
						message: "请先登录！",
						duration: 800,
						complete(){
							uni.switchTab({
								url: "/pages/mine/mine"
							})
						}
					});
				}
				
			},
			shareWeixin(){
				const that = this;
				that.$u.mpShare = {
					title: '数字地图',
					path: '/pages/index/index'
				}
			},
			
		}
	}
</script>

<style scoped lang="scss">
	
	.main_page{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		
		.mz_btn{
			margin-left: 20px;
			margin-top: 10px;
			width: 80px;
			
			&_box{
				text-align: center;
				height: 30px;
				line-height: 30px;
				border: 1px solid #d5d5d5;
				font-size: 14px;
				border-radius: 15px;
				background-color: rgba(255, 255, 255, 0.7);
				color: #757575;
			}
		}
	}
	
	.qh_map_type{
		position: absolute;
		top: 10px;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 9999;
		
		.qh_map_box{
			width: 35%;
			margin: 0 auto;
		}
	}
	
	.map_scale{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 10px;
		margin: auto;
		height: 100px;
		
		view{
			width: 40px;
			height: 40px;
			line-height: 40px;
			border-radius: 8px;
			display: flex;
			justify-content: center;
			background-color: rgba(255, 255, 255, 0.5);
		}
		
		&_minus{
			margin-top: 10px;
		}
	}
	
	.yw_btn_box{
		position: fixed;
		bottom: 100px;
		right: 10px;
		margin: auto;
		width: 200px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		
		view{
			background-color: rgba(206, 205, 203, 0.7);
			color: #000;
			font-size: 15px;
			// font-weight: bold;
			padding: 5px 12px;
			border-radius: 14px;
		}
	}
	
	
	::v-deep .amap-logo {
	  opacity: 0 !important;
	}
	::v-deep .amap-copyright {
	  opacity: 0 !important;
	}
	
	
	.ade_info_box{
		position: absolute;
		top: 80px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 70%;
		background-color: #2d3548;
		padding: 8px 12px;
		border-radius: 8px;
		color: #fff;
		font-size: 14px;
		
		.closeIconBox{
			display: flex; 
			justify-content: space-between;
			align-items: center;
			
			&_left{
				display: flex;
				align-items: center;
				flex: 1;
				
				&>view:nth-child(1){
					display: flex;
					align-items: center;
				}
				&>view:nth-child(2){
					margin-left: 15px;
				}
			}
		}
		
		.main_info{
			display: flex;
			align-items: center;
			
			.main_info_left{
				flex: 1;
				
				&>view{
					margin-top: 10px;
				}
				.main_info_btn_box{
					flex: 1; 
					display: flex;

				}
				
				.ade_name,.ade_address{
					display: flex;
				}
			}
				
			
			
		}		
	}
	
</style>
